<template>
	<view class="container">
		<!-- 顶部标题，自动适配状态栏 -->
		<view class="header" :style="{ marginTop: safeTop + 'px' }">
			<text class="title">注册</text>
		</view>
		<text class="section-title">请选择您的角色</text>

		<!-- 角色选择区域 -->
		<view class="role-section">

			<!-- 创作者选项 -->
			<view class="role-item" @click="selectRole('designer')">
				<image class="avatar" src="/static/base/user-center/designer.png" mode="aspectFill"></image>
				<text class="role-name">我是创作者</text>
				<view class="radio" :class="{ 'checked': selectedRole === 'designer' }">
					<view v-if="selectedRole === 'designer'" class="checkmark">
						<image style="width: 45rpx;height: 45rpx;" src="/static/images/yes.png"></image>
					</view>
				</view>
			</view>
  
			<!-- 居间人选项 -->
			<view class="role-item" @click="selectRole('between')">
				<image class="avatar" src="/static/base/user-center/between.png" mode="aspectFill"></image>
				<text class="role-name">我是居间人</text>
				<view class="radio" :class="{ 'checked': selectedRole === 'between' }">
					<view v-if="selectedRole === 'between'" class="checkmark">
						<image style="width: 45rpx;height: 45rpx;" src="/static/images/yes.png"></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 确认按钮（仅在选中后显示） -->
		<view v-if="selectedRole" class="confirm-btn-container">
			<button class="confirm-btn" @click="handleConfirm">确认</button>
		</view>
	</view>
</template>

<script>
	import {
		confirmCreator
	} from '@/api/base/user-center.js'

	import {
		getUserIdentityStatus
	} from '@/api/base/user-center.js'


	import {
		mapGetters
	} from 'vuex'

	export default {
		data() {
			return {
				safeTop: 0,
				selectedRole: '' // 默认不选中任何角色
			};
		},

		computed: {
			...mapGetters(['isLogin'])
		},
		onLoad() {
			const {
				barTop
			} = this.$util.getWXStatusHeight();
			this.safeTop = barTop + 10; // 与你个人中心一致

			if (this.isLogin) {
				let _this = this
				getUserIdentityStatus().then(res => {
					// console.error('登录用户信息', res.data);
					if (res.status === 200 && res.data) {

						console.log('res.data', res.data)

						const auditIdentity = res.data.audit_identity || null; //当前审核身份
						const identity = res.data.identity || null; //当前用户身份

						console.log('auditIdentity', auditIdentity)
						console.log('identity', identity)

						//已有身份，跳首页
						if (identity !== 0 && identity !== '0' && identity !== null) {
							uni.redirectTo({
								url: '/pages/base/index/index'
							});
						}

						//申请过设计师
						if (auditIdentity === 2 || auditIdentity === '2') {

							// 跳转设计师审核
							uni.redirectTo({
								url: '/pages/sub_base/designer-apply/index'
							});


						} //申请过居间人
						else if (auditIdentity === 3 || auditIdentity === '3') {

							//居间人审核
							uni.redirectTo({
								url: '/pages/sub_base/between-apply/index'
							});
						}

					}
				})


			}

		},

		methods: {
			selectRole(role) {
				this.selectedRole = role;
			},

			handleConfirm() {
				if (!this.selectedRole) {
					return;
				}

				if (this.selectedRole === 'designer') {
					// 弹出确认模态框
					uni.showModal({
						title: '确认身份',
						content: '您确定要成为创作者吗？此操作不可逆。',
						confirmColor: '#f19060',
						success: (res) => {
							if (res.confirm) {
								// 用户点击“确定”，发送请求
								confirmCreator().then(res => {
									if (res.status === 200) {
										uni.showToast({
											title: '身份确认成功',
											icon: 'success'
										});
										// 跳转首页
										uni.navigateTo({
											url: '/pages/base/index/index'
										});
									} else {
										uni.showToast({
											title: res.message || '操作失败',
											icon: 'none'
										});
									}
								}).catch(err => {
									uni.showToast({
										title: '网络错误，请重试',
										icon: 'none'
									});
									console.error('confirmCreator error:', err);
								});
							}
							// 如果用户点击“取消”，不做任何操作
						}
					});
				} else if (this.selectedRole === 'between') {
					// 居间人路径保持不变，直接跳转申请页
					uni.navigateTo({
						url: '/pages/sub_base/between-apply/index'
					});
				}
			}
		}
	};
</script>

<style scoped>
	.container {
		background: linear-gradient(to bottom, #e0f2fe, #ffffff);
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.header {
		display: flex;
		justify-content: center;
		align-items: center;
		/* height: 80rpx; */
		/* background: linear-gradient(to bottom, #e0f2fe, #ffffff); */
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}

	.role-section {
		padding: 40rpx 30rpx;
	}

	.section-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		margin-top: 80rpx;
		margin-left: 40rpx;
	}

	.role-item {
		background-color: #fff;
		display: flex;
		align-items: center;
		padding: 30rpx 20rpx;
		border-bottom: 1rpx solid #eee;
		cursor: pointer;
		margin-top: 20rpx;
	}

	.role-item:last-child {
		border-bottom: none;
	}

	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}

	.role-name {
		font-size: 32rpx;
		color: #333;
		flex: 1;
	}

	.radio {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ccc;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: all 0.2s ease;
	}

	.radio.checked {
		border-color: #000000;
		background-color: #000000;
	}

	.checkmark {
		color: #fff;
		font-size: 28rpx;
		font-weight: bold;
	}

	.confirm-btn-container {
		padding: 30rpx;
		/* background-color: #fff; */
		/* box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.05); */
	}

	.confirm-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 88rpx;
		background-color: #f19060;
		color: #ffffff;
		font-size: 34rpx;
		border-radius: 44rpx;
		border: none;
	}
</style>